<script src='./outLineManual.js'></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    @import url('./outLineManual.scss');
</style>

<template>
    <div class="outLineManualContent">

        <div class="outLineTitle"><span>页面大纲</span></div>

        <div class="outLineOptionBtnGroup">
            <button class="active"><i class="icon iconfont icon-changjing"></i><span>场景</span></button>
            <button><i class="icon iconfont icon-dengguang"></i><span>灯光</span></button>
            <button><i class="icon iconfont icon-shexiangji"></i><span>摄像机</span></button>
            <button><i class="icon iconfont icon-moxing"></i><span>模型</span></button>
            <button><i class="icon iconfont icon-caizhi"></i><span>材质</span></button>
            <button><i class="icon iconfont icon-wangge"></i><span>网格</span></button>
            <button><i class="icon iconfont icon-tupian"></i><span>贴图</span></button>
            <button><i class="icon iconfont icon-wenben"></i><span>文本</span></button>
        </div>

        <div class="outLineOptionDetai">

            <div class="container">

                <!--当key对应的值是一个字符串且不为空的时候-->
                <div v-if="typeof baseConfig === 'string' && baseConfig">
                    <div class="categoryDetail" @click="selectedDetiail" ><span>{{baseConfig}}</span></div>
                </div>

                <!--当key对应的值是一个对象且不为空的时候-->
                <div v-else-if="typeof baseConfig === 'object'">

                    <div v-if="baseType === 'text' || baseType === 'geo'">
                        <div v-for="(v1, k1) in baseConfig" :key="k1">
                            <div class="categoryDetail" @click="selectedDetiail($event, k1, baseType)"><span>{{v1.name}}</span></div>
                        </div>
                    </div>

                    <div v-else-if="baseType === 'textures'">
                        <div v-for="(v1, k1) in baseConfig" :key="k1">
                            <div class="categoryDetail" @click="selectedDetiail($event, k1, baseType)"><span>{{k1}}</span></div>
                        </div>
                    </div>

                    <div v-else-if="baseType === 'model'">
                        <div v-for="(v1, k1) in baseConfig" :key="k1">

                            <div class="categoryTitle" @click="slideToggle($event, baseType, k1)">
                                <i class="el-icon-caret-right"></i>
                                <span>{{v1.name}}</span>
                            </div>

                            <div class="categoryDetailBase">
                                <div v-for="(v2, k2) in v1.children" :key="k2" class="categoryDetailBox">
                                    <div class="categoryDetail" @click="selectedDetiail($event, k2, k1, 'model')" >
                                        <span>{{v2.type === "Mesh" ? v2.name : v2.name + " (" + v2.type + ")"}}</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div v-else>
                        <div v-for="(v1, k1) in baseConfig" :key="k1">

                            <div class="categoryTitle" @click="slideToggle($event, baseType, k1)">
                                <i class="el-icon-caret-right"></i>
                                <span>{{EditorDefaultConfig.getCategoryName(baseType, k1)}}</span>
                            </div>

                            <div class="categoryDetailBase">
                                <div v-for="(v2, k2) in v1" :key="k2" class="categoryDetailBox">
                                    <div class="categoryDetail" @click="selectedDetiail($event, k2, k1, baseType)" ><span>{{v2.name}}</span></div>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>

            </div>

        </div>

        <div class="usedSpace">已使用空间：46M/300M</div>
    </div>
</template>